<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           width: 100px;
           height: 100px;
           background-color: red;
           margin: 100px auto;
       }
    </style>
    
</head>
<body>
    

    <div id="app" :class="[name ,'name']">
        <input type="text" v-model="msg">{{msg }}
        <br>
       <p v-html="fu"></p>
       <a href="www.baidu.com">我是没有下划线的a标签</a>
       <button @click="hiedshow">{{ show?"消失":"显示"}}</button>
       <div class="box1" v-show="show"> </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script>
        var vm =new Vue({
            el:"#app",
            data:{
                msg:"",
                fu:`
                <h2>我是2级标签</h2>
                <a style=" text-decoration: none;">我是没有下划线的a标签</a>
                `,
                name:'box',
                show:true
            },
            methods:{
                hiedshow(){
                    this.show=!this.show
                }
            }
        })
    </script>
</body>
</html>